<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,minimal-ui"/>
    <link href="http://www.qlcoder.com//uploads/145620041535888.png" type="image/x-icon" rel=icon>
    <title>图片库</title>

    <link href="http://www.qlcoder.com//css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/bootstrap-theme.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/css/photoGallery.css">
    <link rel="stylesheet" href="/css/jquery.fileupload.css">
    <link rel="stylesheet" href="/css/jquery.fileupload-ui.css">
</head>
<body>
<nav class="nav">
    <!--<div style="width:8.33%;height: 50px;float: left;"></div>-->
    <div class="container-fluid"><!--fluid-->
        <div class="pull-left">
            <a class="" href="/home" style="display: inline-block;"><img src="http://www.qlcoder.com/img/ql_logo1.png"> </a>
        </div>
        <div class="pull-left nav-list">
            <ul class="">
                <li class=""><a href="/home"><span color="gray"
                                                   style="font-size:15px;">技能树</span>
                </a></li>
                <li class=""><a
                        href="/discuss/all"><span color="gray" style="font-size:15px;">讨论区</span></a></li>
                <li class=""><a href="/article/all"><span color="gray"
                                                          style="font-size:15px;">文章</span></a>
                </li>
                <li class=""><a href="/rank"><span color="gray"
                                                   style="font-size:15px;">排行榜</span></a>
                </li>
                <li class=""><a href="/help"><span color="gray"
                                                   style="font-size:15px;">帮助中心</span></a>
                </li>
                <!-- <li class=""><a href="/help#opinion"><span color="gray" style="font-size:15px;">意见反馈<span></span></span></a></li> -->
            </ul>
        </div>
        <div class="pull-right ">
            <ul class="avator pull-right">
                <li class="dropdown">
                    <a class="dropdown-toggle pull-left" data-toggle="dropdown"
                       role="button" aria-haspopup="true" aria-expanded="false">
                        <img style="max-width:100px; margin-top: -20px;margin-bottom: -15px;margin-right: 10px;"
                             src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="img-circle" alt="cinque terre"
                             width="30" height="30">

                        <!--<span class="badge s_tip">4</span>-->
                        &nbsp;&nbsp;<span color="gray" style="font-size:15px;">端着木鱼敲代码&nbsp;</span>
                        <span class="caret"></span>
                    </a>
                    <!--<span class="badge s_tip">4</span>-->
                    <ul class="dropdown-menu ">
                        <li><a href="/profile/792c"
                               target="_blank"><i class="iconfont">&#xe612;</i>我的主页</a></li>
                        <li><a href="/u/update" target="_blank"><i class="iconfont">&#xe603;</i>设置</a>
                        </li>

                        <li><a href="/inbox" target="_blank"><i class="iconfont">&#xe607;</i>私信
                        </a></li>
                        <!--<li role="separator" class="divider"></li>-->
                        <li><a href="/logout" target="_blank"><i class="iconfont">
                            &#xe613;</i>退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

</nav>


<!-- Latest compiled JavaScript -->
<div class="contain">
    <form method="POST" action="http://www.qlcoder.com/u/update" accept-charset="UTF-8" enctype="multipart/form-data">
<input type="hidden" name="_token" value="gtZTApIgqMRBgE1CSS6dGBc55RGgO4DspVWxOpdO">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12 lead">
                                    <span class="owner">shinian的图片库</span>
                                    <span class="img-note">0/500</span>
                                    <span id="img_upload" class="btn btn-primary fileinput-button pull-right">
                                        <span>上传图片</span>
                                        <input type="file" id="image" name="image" multiple>
                                    </span>
                                    <!-- 进度条-->
                                    <!--<div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">-->
                                        <!--<div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div>-->
                                    <!--</div>-->

                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="img-warp">
                                    <ul>
                                        <li style="background:url('/img/u=1183223528,3058066243&fm=206&gp=0.jpg') no-repeat;background-size:100%;">
                                            <a class="clipboard" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;">复制图片地址</a>
                                            <a class="del-img" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;"><i class="iconfont">&#xe61a;</i></a>
                                        </li>
                                        <li style="background:url('http://img3.imgtn.bdimg.com/it/u=4271053251,2424464488&fm=21&gp=0.jpg') no-repeat;background-size:100%;">
                                            <a class="clipboard" data-url="http://img3.imgtn.bdimg.com/it/u=4271053251,2424464488&fm=21&gp=0.jpg" href="javascript:;">复制图片地址</a>
                                            <a class="del-img" data-url="http://img3.imgtn.bdimg.com/it/u=4271053251,2424464488&fm=21&gp=0.jpg" href="javascript:;"><i class="iconfont">&#xe61a;</i></a>
                                        </li>
                                        <li style="background:url('http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg') no-repeat;background-size:100%;">
                                            <a class="clipboard" data-url="http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" href="javascript:;">复制图片地址</a>
                                            <a class="del-img" data-url="http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg" href="javascript:;"><i class="iconfont">&#xe61a;</i></a>
                                        </li>
                                        <li style="background:url('/img/u=1183223528,3058066243&fm=206&gp=0.jpg') no-repeat;background-size:100%;">
                                            <a class="clipboard" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;">复制图片地址</a>
                                            <a class="del-img" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;"><i class="iconfont">&#xe61a;</i></a>
                                        </li>
                                        <li style="background:url('/img/u=1183223528,3058066243&fm=206&gp=0.jpg') no-repeat;background-size:100%;">
                                            <a class="clipboard" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;">复制图片地址</a>
                                            <a class="del-img" data-url="/img/u=1183223528,3058066243&fm=206&gp=0.jpg" href="javascript:;"><i class="iconfont">&#xe61a;</i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document" style="width:1200px;position: absolute;top: 50%;left: 50%;margin-left: -600px;margin-top:-200px;">
                <div class="modal-content">

                    <div class="modal-body" style="padding:0;">
                        <img src="http://www.qlcoder.com/uploads/145059173416304.png" style="display: block;margin: 0 auto;">
                    </div>

                </div>
            </div>
        </div>
    </form>
</div>



<!-- JavaScript jQuery code from Bootply.com editor  -->

<!-- Footer -->
<footer>
    <p>©2016 千里码 浙ICP备15038807号-1 联系我们:oreo@qlcoder.com <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=08dcd44232943b517c2ed04dceb097155575f604791c57bbd2f9759e90e22d58">qq群480394714</a>
    </p>
</footer>
</body>
<script src="http://www.qlcoder.com//js/jquery.min.js"></script>
<script src="http://www.qlcoder.com//js/bootstrap.min.js"></script>
<script src="http://www.qlcoder.com//js/base.js"></script>
<script src="/js/jquery.zclip.min.js"></script>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/jquery.fileupload.js"></script>
<script src="/js/jquery.iframe-transport.js"></script>
<script>
    $(function(){
        copyPath();
        //从图片库删除
        delImg();
        thumbImg();
        $("#image").fileupload({
            url: 'http://www.qlcoder.com/upload',
			_token:$("input[name='_token']").val(),
            sequentialUploads: true,
            done: function (e, data) {
                console.log(data)
                var d = data.result;
                if(!d.suc){
                    alert("上传失败");
                }else{
                    var imgshow = '<li style="background:url('+ d.path+') no-repeat;background-size:100%;">'+
                    '<a class="clipboard" data-url="'+ d.path+'" href="javascript:;">复制图片地址</a>'+
                   '<a class="del-img" data-url="'+d.path+'" href="javascript:;"><i class="iconfont">&#xe61a;</i></a></li>';
                    $('.img-warp ul').append(imgshow);
                    delImg();
                    copyPath();
                    thumbImg();
                }
            }
        })
    });
    function delImg(){
       $(".del-img").each(function(){
            var _this=this;
            $(_this).click(function(e){
					e.stopPropagation();
				var _this=this;
                if(confirm("确认删除该图片?")){
                    var path=$(this).attr("data-url");
                    $.ajax({
                        url:"http://www.qlcoder.com/deleteimage?deletepath="+path,
                        type:"post",
                        dataType:"json",
                        data:{
                            _token:$("input[name='_token']").val()
                        },
                        success:function(data){
                            console.log(data);
                            $(_this).parent().remove();
                        }
                    })
                }
            })
        }); 
    }
    //copy path
    function copyPath(){
        $(".clipboard").click(function(e){
            e.stopPropagation();
        });
        $(".clipboard").zclip({
            path:"/js/ZeroClipboard.swf",
            copy:function(){
                return $(this).attr("data-url");
            }
        });
    }
    function thumbImg(){
        $(".img-warp ul li").each(function(){
            var _this=this;
            $(_this).click(function(e){
                $("#myModal .modal-body").find("img").attr("src",$(this).children('.clipboard').attr("data-url"));
                $("#myModal").modal('show');
                
            })
        });
        $(".modal-body img").click(function(){
            $("#myModal").modal('hide');
        });
    }
</script>
</body>
</html>
